<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>机构管理</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/index.css?v=20180102">
    <link rel="Shortcut Icon" href="cachet.ico">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><img src="./images/logon.png" alt=""></div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item new_nav-item">
                <a href="javascript:;" class="new_a">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    黄孝铭
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">账户信息</a></dd>
                    <dd><a href="">密码修改</a></dd>
                    <dd><a href="">退出登录</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item"><a class="icon_index" href="javascript:;">首页</a></li>
                <li class="layui-nav-item icon_tow">管理</li>
                <li class="layui-nav-item text-center"><a href="javascript:;">公司管理</a></li>
                <li class="layui-nav-item text-center"><a href="javascript:;">用户管理</a></li>
                <li class="layui-nav-item text-center layui-this"><a href="javascript:;">印章管理</a></li>
                <li class="layui-nav-item icon_three">审核</li>
                <li class="layui-nav-item text-center"><a href="javascript:;">公司管理</a></li>
                <li class="layui-nav-item icon_four">设置</li>
                <li class="layui-nav-item text-center"><a href="javascript:;">账户设置</a></li>
                <li class="layui-nav-item text-center"><a href="javascript:;">密码修改</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="body_right">
            <h4 class="nav_title">机构管理<a href="javascpipt:;" class="add_btn1">添加人员</a><a href="javascpipt:;" class="add_btn1line">添加机构</a></h4>
            <div class="layui-row layui-col-space10">
               <div class="layui-col-md2">
                   <ul class="left_nav">
                       <li class="nav_first">
                            <h4><span  class="icon" data-on="true">+</span>华东地区</h4>
                           <ul class="first_ul">
                               <li class="first_li">
                                    <h5><span class="icon fl" data-on="true">+</span><span class="fl title">上海公司</span></h5>
                                   <div class="add_btn"><span class="color_green add">修改</span><span class="color_red delete">删除</span></div>
                                    <ul class="second_ul">
                                        <li>销售部</li>
                                        <li>财务部</li>
                                        <li>行政部</li>
                                    </ul>
                               </li>
                               <li class="first_li">
                                   <h5><span class="icon fl" data-on="true">+</span><span class="fl title">上海公司</span></h5>
                                   <div class="add_btn"><span class="color_green add">修改</span><span class="color_red delete">删除</span></div>
                                   <ul class="second_ul">
                                       <li>销售部</li>
                                       <li>财务部</li>
                                       <li>行政部</li>
                                   </ul>
                               </li>
                           </ul>
                       </li>
                       <li class="nav_first">
                           <h4><span  class="icon" data-on="true">+</span>西北地区</h4>
                           <ul class="first_ul">
                               <li class="first_li">
                                   <h5><span class="icon fl" data-on="true">+</span><span class="fl title">上海公司</span></h5>
                                   <div class="add_btn"><span class="color_green add">修改</span><span class="color_red delete">删除</span></div>
                                   <ul class="second_ul">
                                       <li>销售部</li>
                                       <li>财务部</li>
                                       <li>行政部</li>
                                   </ul>
                               </li>
                               <li class="first_li">
                                   <h5><span class="icon fl" data-on="true">+</span><span class="fl title">上海公司</span></h5>
                                   <div class="add_btn"><span class="color_green add">修改</span><span class="color_red delete">删除</span></div>
                                   <ul class="second_ul">
                                       <li>销售部</li>
                                       <li>财务部</li>
                                       <li>行政部</li>
                                   </ul>
                               </li>
                           </ul>
                       </li>
                   </ul>
               </div>
                <div class="layui-col-md10">
                    <table class="layui-table mytable" lay-even="" lay-skin="nob">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>联系方式</th>
                            <th>登录账户</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>小明明</td>
                            <td>男</td>
                            <td>18909878900</td>
                            <td>19878987867</td>
                            <td>正常</td>
                            <td class="allbox_a"><a href="javascript:;" class="red_line">移除</a></td>
                        </tr>
                        <tr>
                            <td>小明明</td>
                            <td>男</td>
                            <td>18909878900</td>
                            <td>19878987867</td>
                            <td>正常</td>
                            <td class="allbox_a"><a href="javascript:;" class="red_line">移除</a></td>
                        </tr>
                        <tr>
                            <td>小明明</td>
                            <td>男</td>
                            <td>18909878900</td>
                            <td>19878987867</td>
                            <td>正常</td>
                            <td class="allbox_a"><a href="javascript:;" class="red_line">移除</a></td>
                        </tr>
                        <tr>
                            <td>小明明</td>
                            <td>男</td>
                            <td>18909878900</td>
                            <td>19878987867</td>
                            <td>正常</td>
                            <td class="allbox_a"><a href="javascript:;" class="red_line">移除</a></td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="my_newlayerpage">
                        <div id="demo3"></div>
                    </div>
                </div>
            </div>


        </div>
     </div>
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script src="./js/jquery.min.js"></script>
<script src="./layui/layui.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element','form','layedit','laydate','laypage'], function(){
        var element = layui.element;
        var form = layui.form;
        var layedit = layui.layedit
        var laydate = layui.laydate;
        var laypage = layui.laypage;
        var   layer = layui.layer;
        //自定义首页、尾页、上一页、下一页文本
        laypage.render({
            elem: 'demo3'
            ,count: 100
            ,first: '首页'
            ,last: '尾页'
            ,prev: '<em>←</em>'
            ,next: '<em>→</em>'
        });
        $('.add_btn1').click(function () {
            layer.open({
                type: 2,
                title: '添加人员',
                shadeClose: true,
                shade: 0.8,
                area: ['50%', '46%'],
                scrollbar: true,
                content: '添加人员弹窗.html'
            });
        });
        $('.add_btn1line').click(function () {
            layer.open({
                type: 2,
                title: '添加机构',
                shadeClose: true,
                shade: 0.8,
                area: ['50%', '46%'],
                scrollbar: true,
                content: '添加机构弹窗.html'
            });
        });

        $('.nav_first').on("click",".icon",function () {
            if($(this).is('.on')){
                $(this).removeClass('on');
                $(this).parent().siblings('ul').css('display','none');
                $(this).html('+');
            }else{
                $(this).addClass('on');
                $(this).parent().siblings('ul').css('display','block');
                $(this).html('-');

            }
        });
        $(".first_li").hover(function(){
            $(this).children('.add_btn').show();
        }, function(){
            $(this).children('.add_btn').hide();
        });
        $('.red_line').click(function () {
            layer.confirm('确定要移除此人吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                layer.msg('移除成功');
            });
        })
    });
</script>
</body>
</html>